<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单选择</title>
<style>
*{padding:0;margin:0;list-style:none;}
#box{
    width: 70%;
    height: 800px;
    margin:0 auto;
    /* text-align: center; */
    border:5px solid olivedrab;
    /* line-height: 100px; */
    position: relative;
}
#bos input[type="text"]{
    width: 360px;
    height: 50px;
    font-size: 21px;
    margin-bottom: 30px;
}
#box h1:nth-child(1){
    margin-top: 50px;
}
input[type="submit"]{
    width: 90px;
    height: 50px;
    font-size: 32px;

}
#box input[type="text"]{
  width: 60%;
  height: 50px;
  font-size: 32px;
}
form{
    margin-left: 20px;
}
table{
    width: 100%;
    text-align: center;
}
table tr td{
    font-size: 32px;
}
#cun{
  margin:20px 0px;
}
#bos{
    width: 100%;
    height: 600px;
    margin:0 auto;
    text-align: center;
    position: absolute;
    left:0px;
    top: 50px;
    background: rgba(1,1,1,0.6);
    display: none;
}
.btnDelete,.btnEdit{
    width: 80px;
    height: 30px;
    background: red;
    border-radius: 5px;
    font-size: 21px;
    color: #fff;
}
</style>
</head>
<body>
<div id="box">
    <form action="">
        <h1>姓名</h1>
        <input type="text" id="name" placeholder="请输入姓名">
        <h1>电话</h1>
        <input type="text" id="tel" placeholder="请输入电话">
        <h1>邮箱</h1>
        <input type="text" id="email" placeholder="请输入邮箱"><br>
        <input type="submit" value="保存" id="cun">
    </form>
    <table border="1">
        <thead>
            <tr>
                <td>姓名</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>功能</td>
            </tr>
        </thead>
       
    <tbody>

    </tbody>
 </table>

<div id="bos">
    <form action="">
        <input type="text" class="ipt1" placeholder="请输入姓名"><br>
        <input type="text" class="ipt2" placeholder="请输入电话"><br>
        <input type="text" class="ipt3" placeholder="请输入邮箱"><br>
        <input type="submit" value="修改" id="bosxiu">
        <input type="submit" value="关闭" id="bosguan" >
    </form>
</div> 
</div>
</body>
<script src="jq3.js"></script>
<script>
//获取数据，并将数据存到localStorage中
$(function(){
    $('#cun').click(function(e){
        e.preventDefault();
        var obj = {
            name:$('#name').val(),
            tel:$('#tel').val(),
            email:$('#email').val()
        }
        var all = localStorage.getItem('list'); 
      
        if(all){
            all = JSON.parse(all);
            all.push(obj);
            localStorage.setItem('list',JSON.stringify(all));
        }else{
            localStorage.setItem('list',JSON.stringify([obj]));
        }
          console.log(all)
//渲染表格  =========================
        var str = '<tr>'+
                    '<td>' + obj.name  + '</td>'+
                    '<td>' + obj.tel   + '</td>'+
                    '<td>' + obj.email + '</td>'+
                    '<td>' + 
                    '<button class="btnDelete">删除</button>' + 
                    '<button class="btnEdit">修改</button>' +
                    '</td>'+
                '</tr>'

        $('table tbody').append(str);
        console.log(str)
    }) 
  //将localStorage中的数据渲染到表格上 
  getAll()   
function getAll(){
  var all = localStorage.getItem('list');
  all = JSON.parse(all);
  for(var i=0;i<all.length;i++){
    var str = '<tr>'+
                  '<td>' + all[i].name  + '</td>'+
                  '<td>' + all[i].tel   + '</td>'+
                  '<td>' + all[i].email + '</td>'+
                  '<td>' + 
                  '<button class="btnDelete">删除</button>' + 
                  '<button class="btnEdit">修改</button>' +
                  '</td>'+
              '</tr>'
      $('table tbody').append(str);
  }
}


//删除
  $('table').on('click','.btnDelete',function(){
    var tr = $(this).parent().parent();
    var all = localStorage.getItem('list');
    all = JSON.parse(all);
    all.splice(tr.index(),1);
    localStorage.setItem('list',JSON.stringify(all));
    tr.remove();
    //修改
  }).on('click','.btnEdit',function(){
    $('#bos').css({
      'display':'block'
    })
    var all = localStorage.getItem('list');
    all = JSON.parse(all);
    var tr = $(this).parent().parent();
    $('.ipt1').val(all[tr.index()].name);
    $('.ipt2').val(all[tr.index()].tel);
    $('.ipt3').val(all[tr.index()].email);
    var obj1 = {
      name:all[tr.index()].name,
      tel:all[tr.index()].tel,
      email:all[tr.index()].email,
    }
    obj1.index = tr.index();
    sessionStorage.setItem('listBos',JSON.stringify(obj1));
  })

//修改数据
$('#bosxiu').on('click',function(e){
  e.preventDefault();
  var obj1 = sessionStorage.getItem('listBos');
  obj1 = JSON.parse(obj1);
  var all = localStorage.getItem('list');
  all = JSON.parse(all);
  var obj2 = {
    name:$('.ipt1').val(),
    tel:$('.ipt2').val(),
    email:$('.ipt3').val(),
  }
  all.splice(obj1.index,1,obj2);
  localStorage.setItem('list',JSON.stringify(all));
  $('table tbody tr').remove();
  getAll()
})
//关闭
$('#boxguan').on('click',function(){
  $('.bos').css({
    'display':'none'
  })
})


})
</script>
</html>